<template>
  <div ref="index" class="home">
    <!-- 顶部 -->
    <Top class="top" />
    <!-- 固定导航 -->
    <Fixed class="show" v-show="isFixed"/>
    <!-- 新闻 -->
    <News />
    <!-- 游戏特色介绍 -->
    <Games class="game" />
    <!-- 轮播图区域 -->
    <Lunbo />
    <!-- 序章 -->
    <Last/>
    <!-- 底部 -->
    <Bottom v-if="yong" />
  </div>
</template>

<script>
// @ is an alias to /src  异步加载组件优化速度
const Top = () => import("../components/Top.vue");
const News = () => import("../components/News.vue");
const Fixed = () => import("../components/Fixed.vue");
const Games = () => import('./Games.vue');
const Lunbo = () => import('./Lunbo.vue');
const Last = () => import('./Last.vue');
const Bottom = () => import('./Bottom.vue');

export default {
  data() {
    return {
      isFixed: true, //是否显示侧边按钮
      yong:false,
    };
  },
  name: "Home",
  components: {
    Top,
    News,
    Fixed,
    Games,
    Lunbo,
    Last,
    Bottom
  },
  methods: {
    shows(val) {
      this.show = val;
    },
    // handleScrollx() {
    //   let top = this.$refs.index.getBoundingClientRect().top; //屏幕距离最上面距离
    //   if (top < -150) {
    //     this.isFixed = true;
    //   } else {
    //     this.isFixed = false;
    //   }
    // },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScrollx, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScrollx, true); //移除监听
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/css/home.less");
</style>